<template>
    <div class="cinema-list-page">
        <van-nav-bar left-arrow
                     @click-left="$router.back(-1)"
                     :fixed="true"
                     :title="$t('m.Cinema')"
                     :right-text="$t('m.Map')"
                     @click-right="goToListMap"
        />
        <div style="padding: 41px"></div>
        <div class="list-title-bar" ref="headerBox">
            <van-row class="tabbar-box">
                <van-col span="8" class="tabbar" @click.native="townshipModalShow = !townshipModalShow">
                    <span v-if="townshipIdForTitle" class="title-text font-color">{{getTownshipType(townshipIdForTitle)}}</span>
                    <span v-else-if="regionIdForTitle" class="title-text font-color">{{getRegionTypeStr(regionIdForTitle)}}</span>
                    <span class="title-text" v-else>{{$t('m.Location')}}</span>
                    <span class="san-box"></span>
                </van-col>
            </van-row>
        </div>
        <van-list
            v-model="loading"
            :finished="finished"
            loading-text=" "
            @load="getList"
            class="main-explore">
            <div class="explore-item" @click="goToDetail(item)" v-for="(item, index) in tableData" :key="index">
                <div class="explore-item-label label-title" v-if="$i18n.locale == 'MM'">{{translateString(item.nameBurmese)}}</div>
                <div class="explore-item-label label-title" v-else>{{translateString(item.name)}}</div>
                <div class="explore-item-label" v-if="$i18n.locale == 'MM'">{{translateString(item.streetBurmese)}}</div>
                <div class="explore-item-label" v-else>{{translateString(item.street)}}</div>
                <div class="explore-item-label">{{getTownshipType(item.townshipId)}},{{getRegionTypeStr(item.regionId)}}</div>
            </div>
        </van-list>
        <!--Location popup-->
        <van-popup class="modal" v-model="townshipModalShow" position="right" :overlay="false">
            <van-nav-bar
                :title="$t('m.Location')"
                class="filter-title"
                left-arrow
                @click-left="townshipModalShow = false"
            />
            <van-tree-select
                :items="locationItems"
                :main-active-index="mainActiveIndex"
                :active-id="getNumberTownshipId()"
                @navclick="onNavClick"
                @itemclick="onItemClick"
                class="location-tree-select"
            />
            <div class="submit-btn">
                <van-button size="large" class="btn" @click="modalSubmit">{{$t('m.Submit')}}</van-button>
            </div>
        </van-popup>
        <div style="padding:40px;"></div>
        <footer-bar ref="footer" footerBar="cinema"></footer-bar>
    </div>
</template>
<script>
    import {searchCimenaList,} from '../../static/api/mgc_api'
    import Qs from 'qs'
    import township from '../../static/json/township'
    import region from '../../static/json/region'
    import mm_region from '../../static/mmJson/region'
    import mm_township from '../../static/mmJson/township'
    import FooterBar from '@/components/FooterBar'
    export default {
        name: "CinemaList",
        components: {
            FooterBar
        },
        data() {
            return {
                townshipModalShow: false,
                locationItems: [],
                mainActiveIndex: 0,
                townshipIdForTitle: null,
                regionIdForTitle: null,
                regionId: 2, //表单提交字段
                townshipId: null, //表单提交字段
                loading: false,
                finished: false,
                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
            }
        },
        computed: {
            regionJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_region
                } else {
                    return region
                }
            },
            townshipJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_township
                } else {
                    return township
                }
            },
        },
        methods: {
            getRegionType() {
                // 导入地区选择的json
                let regionArr = [];

                let r = 0;
                for (let i = 0; i < this.regionJson.length; i++) {
                    let townshipArr = [];
                    let k = 0;
                    for (let j = 0; j < this.townshipJson.length; j++) {
                        if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                            if (k == 0) {
                                if(this.$store.state.store.localLang == 'MM'){
                                    townshipArr.push({
                                        text: 'အားလံုး',
                                        regionId: this.regionJson[i].value,
                                        id: null,
                                    })
                                } else if (this.$store.state.store.localLang == 'MMU'){
                                    townshipArr.push({
                                        text: 'အားလုံး',
                                        regionId: this.regionJson[i].value,
                                        id: null,
                                    })
                                } else {
                                    townshipArr.push({
                                        text: 'All',
                                        regionId: this.regionJson[i].value,
                                        id: null,
                                    })
                                }
                                k = k + 1
                            }
                            townshipArr.push({
                                text: this.townshipJson[j].text,
                                regionId: this.regionJson[i].value,
                                id: this.townshipJson[j].value,
                            })
                        }
                    }
                    if (r == 0) {
                        if(this.$store.state.store.localLang == 'MM'){
                            regionArr.push({
                                text: 'အားလံုး',
                                id: null,
                            })
                        } else if (this.$store.state.store.localLang == 'MMU'){
                            regionArr.push({
                                text: 'အားလုံး',
                                id: null,
                            })
                        } else {
                            regionArr.push({
                                text: 'All',
                                id: null,
                            })
                        }
                        r = r + 1
                    }
                    regionArr.push({
                        text: this.regionJson[i].text,
                        id: this.regionJson[i].value,
                        children: townshipArr,
                    })

                    if (this.regionId == this.regionJson[i].value ) {
                        this.mainActiveIndex = i + 1
                    }
                }

                this.locationItems = regionArr;
            },
            getTownshipType (t) {
                let str = ''
                this.townshipJson.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getRegionTypeStr(t) {
                let str = ''
                this.regionJson.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getNumberTownshipId() {
                if (this.townshipId != null && this.townshipId != '') {
                    return Number(this.townshipId)
                } else {
                    return null
                }
            },
            onNavClick(index) {
                this.townshipId = null;
                this.mainActiveIndex = index;
                this.regionId = this.locationItems[index].id;
            },
            onItemClick(data) {
                this.townshipId = data.id;
            },
            modalSubmit() {
                this.townshipIdForTitle = this.townshipId
                this.regionIdForTitle = this.regionId
                this.getList(1)
                this.townshipModalShow = false
            },
            getList(pageNum) {
                if (pageNum == 1) {
                    this.pageData.pageNum = 1;
                }

                let searchForm = {};
                searchForm.regionId = this.regionId
                searchForm.townshipId = this.townshipId
                let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})
                searchCimenaList(params).then((res) => {
                    if (res.data.data.errorID == 0) {
                        this.tableData = res.data.data.object.info || []
                        window.scrollTo(0, 0)
                        this.finished = true
                        this.loading = false
                    } else {
                        this.$toast(res.data.data.message)
                        this.finished = true
                        this.loading = false
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('error, please try again later~')
                    this.finished = true
                    this.loading = false
                })
            },
            translateString(str) {
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            getCinemaName(item){
                if(this.$store.state.store.localLang == 'MM'){
                    return item.nameBurmese
                } else{
                    return item.name
                }
            },
            getStreetName(item){
                if(this.$store.state.store.localLang == 'MM'){
                    return item.streetBurmese
                } else{
                    return item.street
                }
            },
            goToDetail(item) {
                this.$router.push({
                    path:'/movie/cinema-detail',
                    query:{
                        id: item.id
                    }
                })
            },
            goToListMap() {
                this.$router.push({
                    path:'/map-details/cinema-list-map',
                    query:{
                        regionId: this.regionId,
                        townshipId: this.townshipId,
                    }
                })
            }
        },
        mounted(){
            this.getRegionType()
        }
    };
</script>
<style>
    .cinema-list-page .van-nav-bar{
        background-color: #fff;
        /*background-color: #f2f2f2;*/
        color: #333;
        z-index: 9;
    }
    .cinema-list-page .van-nav-bar .van-icon{
        color: #C8C8C8;
        margin-right: 15px;
        font-size: 18px;
    }
    .cinema-list-page .van-nav-bar .van-nav-bar__title{
        color: #333;
    }
    .cinema-list-page .modal .van-field__body{
        height: 100%;
    }
    .cinema-list-page .modal .van-tree-select__nitem--active, .cinema-list-page .modal .van-tree-select__nitem:active{
        background: #f90;
        color: #fff;
    }
    .cinema-list-page .modal .van-tree-select__item--active, .cinema-list-page .modal .van-tree-select__item:active{
        color: #f90;
    }
    .cinema-list-page .van-button--large {
        width: 100%;
        height: 50px;
        line-height: 48px;
        text-transform: inherit;
        margin: 0;
    }
    .location-tree-select.van-tree-select{
        height: 80%!important;
    }
    .location-tree-select.van-tree-select .van-tree-select__content{
        height: 100%!important;
    }
    .cinema-list-page .van-tree-select__nitem--active:after{
        background-color: #f90;
    }
</style>
<style scoped>
    .list-title-bar{
        width: 100%;
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
    }
    .tabbar-box{
        padding: 5px 0;
        border-bottom: 1px solid #D7D7D7;
        width: 100%;
        background: #fff;
    }
    .tabbar-box .tabbar{
        position: relative;
        padding: 2px 20px 2px 10px;
        line-height: 1.5;
        /*border-right: 1px solid #F2F2F2;*/
        text-align: center;
        font-size: 14px;
        height: 25px;
    }
    .title-text {
        width: 90%;
        display: inline-block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .font-color{
        color: rgb(255, 153, 0);
    }
    .san-box{
        position: absolute;
        right: 9px;
        top: 10px;
        width: 0;
        height: 0;
        border-top: 5px solid #666666;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        display: inline-block;
    }
    .modal {
        width: 100%;
        height: 100%;
    }
    .submit-btn {
        width: 90%;
        border-top: 1px solid #F2F2F2;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 10px;
    }

    .submit-btn .btn {
        border: 1px solid #FF9A03;
        color: #FF9A03;
    }
    .explore-item{
        border-bottom: 1px solid #e0e0e0;
        padding: 8px 4%;
    }
    .explore-item-label{
        color: rgb(153, 153, 153);
        line-height: 150%;
    }
    .explore-item-label.label-title{
        color: #2c3e50;
    }
</style>
